<template>
  <el-button v-if="loading" class="flex items-center">
    <svg class="w-5 h-5 mr-3 -ml-1 text-indigo-600 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    导出中...
  </el-button>
  <el-button class="w-full" v-else @click="download(exportUrl ? exportUrl : api, query)">导出</el-button>
</template>
<script lang="ts" setup>
defineProps({
  api: {
    type: String,
    required: true
  },
  exportUrl: {
    type: String,
    default: ''
  },
  query: {
    type: Object,
    default: () => ({})
  },
  exports: {
    type: Boolean,
    default: true
  }
})
import { useExcelDownload } from '@/composables/curd/useExcelDownload' // excel 导出
const { download, loading } = useExcelDownload()
</script>
